<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>
        欢迎界面
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{css/main.css}" media="all">
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.css}" media="all">
    <link rel="stylesheet" th:href="@{lib/bootstrap/js/bootstrap.min.js}" media="all">
</head>
<body>
<!--    <div th:include="/c/footer::copy"></div>-->

<style type="text/css">
    legend {
        display: block;
        width: 100px;
        border-bottom: 0px;
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }

    legend a {
        color: #666;
    }

    legend a:hover {
        text-decoration: none;
    }

    .layui-table {
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }
</style>
<div class="x-body" style="background-color: #f3f3f3; margin: 0;">


    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol">
                    <img th:src="@{/images/homeIcon1.png}" width="71" alt="">
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数">
                        <span>总栋数</span></a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数">
                        <h1>[[${session.sum}]]</h1>
                    </a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol">
                    <img th:src="@{/images/homeIcon2.png}" width="71" alt="">
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数">
                        <span>总户数</span></a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数">
                        <h1>[[${session.sum1}]]</h1>
                    </a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol">
                    <img th:src="@{/images/homeIcon3.png}" width="71" alt="">
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true"
                       data-title="总人数"><span>总人数</span></a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总人数">
                        <h1 th:text="${session.sum3}"></h1>
                    </a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol">
                    <img th:src="@{/images/homeIcon4.png}" width="71" alt="">
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量">
                        <span>租户数量</span></a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量">
                        <h1 th:text="${session.typeMum}"></h1>
                    </a>

                </div>
            </section>
        </div>

    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="default">信息统计</a></legend>
    </fieldset>

    <!--相关统计-->
    <div class="row">
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">小区人数 <span style="position: absolute;
                        right: 30px;
                        top: 24px;
                        font-size: 12px;
                        color: #999;
                        font-weight: 400;">小区人数统计(人)</span></div>
                <div class="panel-body">
                    <div class="echarts" id="area" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">投诉/满意度
                    <div class="labelIndexBox"><span class="labelIndexleft">投诉(次)</span> <span class="labelIndexrit">业主满意度</span>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="echarts" id="main" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">小区停车位</div>
                <div class="panel-body">
                    <div class="echarts" id="years" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">最新活动</div>
                <div class="panel-body" style="padding-top: 0px;">
                    <ul class="list-group clear-list m-t">
                        <li class="list-group-item fist-item">
                            <span class="float-right" >
                                <b th:each="list,listb:${session.list5}">
                                    <h5 th:text="${list}" style="padding-top: 10px;">
                                        <a th:href="activity_none" th:text="${list}"></a>
                                    </h5>
                                </b>
                            </span>
                            <span class="label label-info">2</span>

                            <span th:each="temp,status :${session.list4}">
                            <h5 style="padding-top: 10px;">
                                <a th:href="activity_none" th:text="${temp}"> </a>
                            </h5>
                            </span>
                        </li>

                    </ul>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">最新保修</div>
                <div class="panel-body" style="padding-top: 0px;">
                    <ul class="list-group clear-list m-t">
                        <li class="list-group-item" style="border-top: none !important;">
                            <span class="float-right">
                                <a th:each="a1,b1:${session.list3}">
                                  <h5 style="padding-top: 10px;">
                                      <a th:text="${a1}"></a></h5>
                                </a>
                            </span>
                            <span class="label label-danger">1</span>
                            <span th:each="a2,b:${session.list2}">
                               <h5 style="padding-top: 10px;"> <a href="activity_none"  th:text="${a2}" ></a></h5>
                            </span>


                        </li>
                    </ul>
                </div>
            </section>
        </div>

        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">已保修</div>
                <div class="panel-body" style="padding-top: 0px;">
                    <ul class="list-group clear-list m-t">
                        <li class="list-group-item" style="border-top: none !important;">
                            <span class="float-right" style="margin-left: 10px">
                                <a th:each="a1,b1:${session.sta1}">
                                    <h5 style="padding-top: 10px;" th:text="${a1}"></h5>
                                </a>
                            </span>
                            <span class="label label-danger">1</span>
                            <span th:each="a,b:${session.sta}">
                                <h5 style="padding-top: 10px;"><a href="" th:text="${a}"></a></h5>
                            </span>
                        </li>
                    </ul>
                </div>
            </section>
        </div>

    </div>

    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        let date = '2020-03-025';
        option = {

            tooltip: {
                trigger: 'axis',
                backgroundColor: "rgba(255, 255, 255, 1)",
                textStyle: {
                    color: '#999'
                },
                extraCssText: 'box-shadow: 0 0 5px #ccc',
                formatter(params) {
                    return `<div>${date} <br/>${params[0].seriesName}：${params[0].value}<br/>${params[1].seriesName}：${params[1].value}%</div>`
                }
            },
            // legend: {
            //     color: ["#13C7F2", "#F9CE81"],
            //     data: ['投诉（次）', '业主满意度'],
            //     icon: 'rect',
            //     itemWidth: 18,
            //     itemHeight: 2,
            //     itemGap: 13,
            //     right: '4%',
            //     textStyle: {
            //         fontSize: 12,
            //         color: '#23b7e5'
            //     }
            // },
            grid: {
                top: 'middle',
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '80%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['[[${session.stringList[0]}]]',
                    '[[${session.stringList[1]}]]',
                    '[[${session.stringList[2]}]]',
                    '[[${session.stringList[3]}]]',
                    '[[${session.stringList[4]}]]',
                    '[[${session.stringList[5]}]]',
                ],
                axisLine: {
                    lineStyle: {
                        color: "#9e9e9e",
                    }
                },
                axisLabel: {
                    color: '#9e9e9e',
                    fontWeight: 'bold'
                },
                axisTick: {
                    show: false,
                },
                axisPointer: {
                    lineStyle: {
                        color: '#D11F1F'
                    }
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#eeeeee',
                        width: 1
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#9e9e9e",
                    },
                },
                axisLabel: {
                    formatter: '{value}%',
                    fontWeight: 'bold'
                },
                splitArea: {
                    show: false
                },
            },
            series: [{
                name: '投诉（次）',
                type: 'line',
                symbol: 'none',
                data:['[[${session.arrList[0]}]]',
                    '[[${session.arrList[1]}]]',
                    '[[${session.arrList[2]}]]',
                    '[[${session.arrList[3]}]]',
                    '[[${session.arrList[4]}]]',
                    '[[${session.arrList[5]}]]',

                ],

                color: "#ff7700",
                lineStyle: {
                    normal: {
                        width: 2.5,
                        color: '#ff7700',
                    }
                },
                hoverAnimation: false,
                smooth: true,
            }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        // 指定图表的配置项和数据
        var myChart = echarts.init(document.getElementById('area'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                backgroundColor: "rgba(255, 255, 255, 1)",
                textStyle: {
                    color: '#999'
                },
                extraCssText: 'box-shadow: 0 0 5px #ccc',
                formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            itemStyle: {
                normal: {
                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                    color: function (params) {
                        // build a color map as your need.
                        var colorList = [
                            "#FA9660", "#F8917E", "#FFD586", "#D68F49", "#DADADA",
                        ];
                        return colorList[params.dataIndex]
                    },
                    //以下为是否显示，显示位置和显示格式的设置了
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    formatter: "{c} ",
                    textStyle: {
                        fontSize: this.standSize / 150,
                        color: "#999"
                    },
                },
            },
            legend: {
                icon: 'circle',
                orient: 'vertical',
                itemWidth: 8,
                itemHeight: 8,
                right: 0,
                bottom: 0,
                data: ['[[${session.name0}]]', '[[${session.name1}]]', '[[${session.name2}]]', '[[${session.name3}]]', '[[${session.name4}]]']
            },
            series: [{
                name: '小区租户人数',
                type: 'pie',
                radius: '55%',
                center: ['50%', '40%'],
                data: [

                    {value: [[${session.person0}]], name: '[[${session.name0}]]'},
                    {value: [[${session.person1}]], name: '[[${session.name1}]]'},
                    {value: [[${session.person2}]], name: '[[${session.name2}]]'},
                    {value: [[${session.person3}]], name: '[[${session.name3}]]'},
                    {value: [[${session.person4}]], name: '[[${session.name4}]]'}

                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.currentIndex = -1;
        setInterval(function () {
            var dataLen = option.series[0].data.length;
            /*console.log(dataLen);*/
            // 取消之前高亮的图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: myChart.currentIndex
            });
            myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
            // 高亮当前图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: myChart.currentIndex
            });
        }, 2000);

        // 使用刚指定的配置项和数据显示图表。
        /*myChart.setOption(option);*/
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('years'));
        //var myChart = echarts.init(document.getElementById('chart2'));
        var ydata = [
            {
                name: '[[${session.parking0}]]',
                value: [[${session.parkingCommunity0}]]
            },
            {
                name: '[[${session.parking1}]]车位',
                value: [[${session.parkingCommunity1}]]
            },
            {
                name: '[[${session.parking2}]]车位',
                value: [[${session.parkingCommunity2}]]
            },
            {
                name: '[[${session.parking3}]]车位',
                value: [[${session.parkingCommunity3}]]
            },
            {
                name: '[[${session.parking4}]]车位',
                value: [[${session.parkingCommunity4}]]
            }
        ];
        var color = ["#FA9660", "#DADADA", "#FFD586", "#F8917E", "#D68F49"]
        var xdata = ['[[${session.parking0}]]车位', "[[${session.parking1}]]车位", "[[${session.parking2}]]车位", "[[${session.parking3}]]车位", '[[${session.parking4}]]车位'];


        option = {
            /*backgroundColor: "rgba(255,255,255,1)",*/
            color: color,
            legend: {
                icon: "circle",
                x: "right",
                right: "10",
                bottom: "0",
                data: xdata,
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    color: '#000'
                },
                /*itemGap: 16,*/
                /*formatter:function(name){
                  var oa = option.series[0].data;
                  var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
                  for(var i = 0; i < option.series[0].data.length; i++){
                      if(name==oa[i].name){
                          return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
                      }
                  }
                }*/
                formatter: function (name) {
                    return '' + name
                }
            },
            series: [{
                type: 'pie',
                clockwise: false, //饼图的扇区是否是顺时针排布
                minAngle: 2, //最小的扇区角度（0 ~ 360）
                radius: ["50%", "70%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                itemStyle: { //图形样式
                    normal: {
                        borderColor: '#ffffff',
                        borderWidth: 1,
                    },
                },

                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        formatter: '{b}\n{c} ({d}%)',
                        rich: {
                            text: {
                                color: "#fff",
                                fontSize: 14,
                                align: 'center',
                                verticalAlign: 'middle',
                                padding: 8
                            },
                            value: {
                                color: "#8693F3",
                                fontSize: 24,
                                align: 'center',
                                verticalAlign: 'middle',
                            },
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: 24,
                        }
                    }
                },
                data: ydata
            }]
        };
        myChart.setOption(option);
        myChart.currentIndex = -1;

        setInterval(function () {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: myChart.currentIndex
            });
            myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
            // 高亮当前图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: myChart.currentIndex
            });
        }, 2000);

        // 使用刚指定的配置项和数据显示图表。
        /*myChart.setOption(option);*/
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>


</div>
<div class="layui-footer footer footer-demo">
    <div class="layui-main">
        <p>
            <a href="/">
                Copyright ©2017 17sucai.com All Rights Reserved.
            </a>
        </p>

    </div>
</div>

</body>
</html>